<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div style="background-color: dimgrey;height: 100px;">
                    员工工资统计与分析
                </div>
            </el-col>
        </el-row>
        <!-- 下面的结构 -->
        <el-row style="margin-top: 10px;">
            <el-col :span="18">
                <div>
                    <div style="background-color: red;height: 300px;" id="zzt">柱状图</div>
                    <div style="background-color: green;height: 300px;margin-top: 5px;" id="zxt">折线图

</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                    
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

export default {
    methods: {
        // 柱状图
        init_zzt(){
                var chartDom = document.getElementById('zzt');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                  xAxis: {                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [
                    {
                      data: this.aa,
                      type: 'bar'
                    }
                  ]
                };
                option && myChart.setOption(option);
            },
            init_zxt(){
                var chartDom = document.getElementById('zxt');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                  xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [
                    {
                      data: [150, 230, 224, 218, 135, 147, 260],
                      type: 'line'
                    }
                  ]
                };
                option && myChart.setOption(option);
            }
    }
}
</script>

<style>

</style>